<template>
    <div class="topic">
        <el-form ref="TopicForm" :model="form" label-width="80px">
            <!-- 遍历已创建的选项渲染 -->
            <div class="item" v-for="(item, index) in topicList" :key="index">
                <el-form-item :label="index + 1 + ''">
                    <div class="item_title">
                        <span>、{{ typeMap[item.type] }}: </span>
                        <span v-text="item.title"></span>
                    </div>
                    <!-- 单项填空 -->
                    <div v-if="item.type === 'input'">
                        <el-input class="disabled" placeholder="禁止输入" disabled></el-input>
                    </div>
                    <!-- 单选 -->
                    <div v-else-if="item.type === 'radio'">
                        <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                            <el-radio :label="i + 1 + '、'" disabled></el-radio>
                            <el-input v-model="item.textList[i]" disabled></el-input>
                        </div>
                    </div>

                    <!-- 多选 -->
                    <div v-else-if="item.type === 'checkbox'">
                        <div class="warp" v-for="(elm, i) in item.textList" :key="i">
                            <el-checkbox :label="i + 1 + '、'" disabled></el-checkbox>
                            <el-input v-model="item.textList[i]" disabled></el-input>
                        </div>
                    </div>

                    <!-- 选择填空 -->
                    <div v-else-if="item.type === 'select'">
                        <el-select v-model="value" placeholder="请选择">
                            <el-option disabled v-for="(elm, i) in item.textList" :key="i" :label="item.textList[i]" :value="i + ''"> </el-option>
                        </el-select>
                    </div>

                    <!-- 上移、下移、删除 -->
                    <div style="margin-top: 10px">
                        <el-button class="el-icon-top" @click="handleItem('up', item)" v-if="index != 0">上移</el-button>
                        <el-button class="el-icon-bottom" @click="handleItem('down', item)" v-if="index != form.itemList.length - 1"
                            >下移</el-button
                        >
                        <el-button type="primary" class="el-icon-edit" @click="edit(item, index)">编辑</el-button>
                        <el-button type="danger" class="el-icon-delete" @click="handleItem('del', item)">删除</el-button>
                    </div>
                </el-form-item>
            </div>
        </el-form>
    </div>
</template>
<script>
export default {
    props: {
        topicList: {
            type: Array,
            default: () => []
        },
        typeMap: {
            type: Object,
            default: () => {}
        }
    },
    data() {
        return {
            keyword: '',
            value: '',
            num: 1,
            form: {
                itemList: []
            },
            itemTitle: '',
            itemText: new Array(1),
            questItem: {},
            showItem: false,
            editIndex: ''
        };
    },

    created() {},
    watch: {
        topicList: {
            deep: true,
            handler(newVal) {
                this.form.itemList = newVal;
            }
        }
    },
    methods: {
        // 编辑
        edit(item, editIndex) {
            this.$emit('editData', { item, editIndex });
        },

        // 判断上移、下移、删除
        handleItem(val, item) {
            switch (val) {
                case 'up':
                    this.moveUp(item);
                    break;
                case 'down':
                    this.moveDown(item);
                    break;
                case 'del':
                    this.delItem(item);
                    break;
                default:
                    throw new Error('该操作不存在！');
            }
        },
        // 上移
        moveUp(item) {
            let index = this.form.itemList.indexOf(item);
            this.form.itemList.splice(index, 1);
            this.form.itemList.splice(index - 1, 0, item);
        },
        // 下移
        moveDown(item) {
            let index = this.form.itemList.indexOf(item);
            this.moveUp(this.form.itemList[index + 1]);
        },
        // 删除
        delItem(item) {
            let index = this.form.itemList.indexOf(item);
            this.form.itemList.splice(index, 1);
        }
    }
};
</script>
<style scoped>
.topic {
    background: #fff;
    height: 60vh;
    padding: 0 30px;
    overflow: auto;
}
.warp {
    display: flex;
    align-items: center;
    padding: 5px 0;
}
.disabled {
    background: #f5f7fa;
}

.el-radio {
    color: #606266;
    cursor: pointer;
    margin-right: 0;
}
</style>